<template>
  <el-tabs default-active-key="1">
    <el-tab-pane key="1" tab="节点">
      <el-row align="middle">
        <el-col :span="8">Border Color</el-col>
        <el-col :span="14">
          <el-input
            v-model="attrs.stroke"
            type="color"
            style="width:100%"
            @change="(e)=>{
              cell.attr('body/stroke', e.target.value)
            }"
          />
        </el-col>
      </el-row>
      <el-row align="middle" style="padding-top: 12px">
        <el-col :span="8">Grid Size</el-col>
        <el-col :span="14">
          <el-input-number
            v-model="attrs.strokeWidth"
            style="width: 100%"
            :min="1"
            :max="5"
            :step="1"
            @change="(val)=>{
              cell.attr('body/strokeWidth', val)
            }"
          />
        </el-col>
      </el-row>
      <el-row align="middle" style="padding-top: 12px">
        <el-col :span="8">Fill</el-col>
        <el-col :span="14">
          <el-input
            type="color"
            :value="attrs.fill"
            style="width:100%"
            @change="(e)=>{
              cell.attr('body/fill', e.target.value)
            }"
          />
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane key="2" tab="文本">
      <el-row align="middle">
        <el-col :span="6">Font Size</el-col>
        <el-col :span="14">
          <el-input-number
            v-model="attrs.fontSize"
            style="width:100%"
            :min="8"
            :max="16"
            :step="1"
            @change="(val)=>{
              cell.attr('text/fontSize', val)
            }"
          />
        </el-col>
      </el-row>
      <el-row align="middle" style="padding-top: 12px">
        <el-col :span="6">Fill</el-col>
        <el-col :span="14">
          <el-input
            v-model="attrs.color"
            type="color"
            style="width:100%"
            @change="(e)=>{
              cell.attr('text/fill', e.target.value)
            }"
          />
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { Cell } from '@antv/x6'

export default {
  name: 'Index',
  props: {
    flowGraph: {
      type: null,
      default: null,
      required: true
    },
    id: {
      type: String,
      default: null,
      required: true
    }
  },
  data() {
    return {
      cell: Cell,
      attrs: {
        stroke: String,
        strokeWidth: Number,
        fill: String,
        fontSize: Number,
        color: String
      }
    }
  },
  watch: {
    // 监听id的变化
    id: {
      handler(nv) {
        if (nv) {
          const { graph } = this.flowGraph
          const cell = graph.getCellById(nv)
          if (!cell || !cell.isNode()) {
            return
          }
          // 对象的指向发生了变化
          this.cell = cell
          // cell.attr('body/refHeight', '300%')
          // cell.attr('body/refWidth', '300%')
          // cell.attr('body/refHeight', '300px')
          // cell.attr('body/refWidth', '300px')

          // 初始化赋值
          this.attrs = {
            stroke: cell.attr('body/stroke'),
            strokeWidth: cell.attr('body/strokeWidth'),
            fill: cell.attr('body/fill'),
            fontSize: cell.attr('text/fontSize'),
            color: cell.attr('text/fill')
          }
          console.log(this.cell)
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {

  }
}
</script>

<style scoped>

</style>
